<script setup>
import { ref } from 'vue';
import SonCom from './components/SonCom.vue';

const msg = ref('来自父组件')

const onMsgChange = ((event)=>{
  msg.value = event
})

</script>

<template>
<!-- 结构 -->
  <div class="bigbox">
    <h1>父组件</h1>
    <p>{{ msg }}</p>
    <button @click="msg += '!'">修改数据</button>
    <!-- 监听事件 -->
    <SonCom :msg="msg" @update:msg="msg=$event"/>
    <SonCom :msg="msg" @update:msg="onMsgChange"/>

    <!-- vue2 属性双向绑定的写法 -->
    <!-- <SonCom :msg.sync="msg"/> -->

    <!-- vue3 属性双向绑定 写法，v-model:msg -->
    <SonCom :msg="msg" v-model:msg="msg"/>
  </div>
</template>

<style scoped>
/* 样式 */
.bigbox{
  padding: 20px;
  border: 5px solid #6de;
}
</style>
